<template>
  <div class="main-body" id="main">
    <ul class="main-time-row" id="timeBtn">
      <li class="active" data-type="week">本周</li><li data-type="month">本月</li>
    </ul>
    <div class="main-left main-col">
      <div class="main-chart chart-left-01">
        <img class="main-logo" src="/static/images/midea.png" alt="">
        <div class="main-info">
          <h3 class="main-title">美的用户体验印象</h3>
          <ul>
            <li>
              <span class="main-title">用户体验得分</span>
              <span id="chartLeft01Score"></span>
            </li>
            <li>
              <span class="main-title">行业排名</span>
              <span id="chartLeft01Rank"></span>
            </li>
            <li>
              <span class="main-title">环比</span>
              <span id="chartLeft01Rate"></span>
            </li>
          </ul>
        </div>
      </div>
      <div class="main-chart chart-left-02">
        <div id="chartLeft0201">全流程用户触点地图</div>
        <div id="chartLeft0202">美的：本期-上期触点得分变化</div>
      </div>
      <div class="main-chart chart-left-03">
        <div id="chartLeft0301">用户体验得分走势</div>
      </div>
    </div>
    <div class="main-right main-col">
      <div class="table-right">
        <h3>TOP5竞争品牌</h3>
        <table class="main-table" id="tableRight01">
          <thead>
            <th>排名</th>
            <th>竞争品牌</th>
            <th>得分</th>
            <th>排行变化</th>
          </thead>
          <tbody></tbody>
        </table>
        <div class="more">
          <a href="javascript:void(0);">更多分析</a>
        </div>
      </div>
      <div class="table-right">
        <h3>美的TOP5事业部</h3>
        <table class="main-table" id="tableRight02">
          <thead>
            <th>排名</th>
            <th>事业部</th>
            <th>得分</th>
            <th>排行变化</th>
          </thead>
          <tbody></tbody>
        </table>
        <div class="more">
          <a href="javascript:void(0);">更多分析</a>
        </div>
      </div>
      <div class="table-right">
        <h3>TOP5一级触点</h3>
      </div>
      <div class="table-right">
        <h3>TOP5指标</h3>
      </div>
    </div>
  </div>
</template>
<script>
import $ from 'jquery'
export default {
  name: "",
  mounted() {
    Date.prototype.format = function (format) {
      var o = {
          "M+": this.getMonth() + 1, //month
          "d+": this.getDate(), //day
          "h+": this.getHours(), //hour
          "m+": this.getMinutes(), //minute
          "s+": this.getSeconds(), //second
          "q+": Math.floor((this.getMonth() + 3) / 3), //quarter
          "S": this.getMilliseconds() //millisecond
      }

      if (/(y+)/.test(format)) {
          format = format.replace(RegExp.$1,
              (this.getFullYear() + "").substr(4 - RegExp.$1.length));
      }

      for (var k in o) {
          if (new RegExp("(" + k + ")").test(format)) {
              format = format.replace(RegExp.$1,
                  RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(
                      ("" + o[k]).length));
          }
      }
      return format;
    };


    var timeType = 'week';
    var params = {};
    var TIMESTAMP = 24 * 60 * 60 * 1000;
    $('#timeBtn li').on('click', function (e) {
      $('#timeBtn li').removeClass('active');
      $(this).addClass('active');
      timeType = $(e.target).data('type');
      init();
    });
    init();
    function init() {
      // 时间类型
      var startTime = '';
      var endTime = '';
      var qoqStartTime = '';
      var qoqEndTime = '';
      var date = new Date();

      if (timeType === 'week') {
        startTime = new Date(date - 8 * TIMESTAMP).format('yyyy-MM-dd') + ' 00:00:00';
        endTime = new Date(date - 2 * TIMESTAMP).format('yyyy-MM-dd') + ' 23:59:59';
        qoqStartTime = new Date(date - 15 * TIMESTAMP).format('yyyy-MM-dd') + ' 00:00:00';
        qoqEndTime = new Date(date - 9 * TIMESTAMP).format('yyyy-MM-dd') + ' 23:59:59';
      } else {
        startTime = new Date(date - 31 * TIMESTAMP).format('yyyy-MM-dd') + ' 00:00:00';
        endTime = new Date(date - 2 * TIMESTAMP).format('yyyy-MM-dd') + ' 23:59:59';
        qoqStartTime = new Date(date - 61 * TIMESTAMP).format('yyyy-MM-dd') + ' 00:00:00';
        qoqEndTime = new Date(date - 32 * TIMESTAMP).format('yyyy-MM-dd') + ' 23:59:59';
      }
      params.startTime = startTime;
      params.endTime = endTime;
      params.qoqStartTime = qoqStartTime;
      params.qoqEndTime = qoqEndTime;

      console.log(params)
      renderChart01();
      renderTable01();
      renderTable02();
    }

    function renderChart01() {
      var score = 4.7;
      var rank = 1;
      var rate = '5%';
      if (parseFloat(rate) > 0) {
        rate += '<img src="'+ upUrl +'" style="height: 20px;">';
      } else if (parseFloat(rate) < 0) {
        rate += '<img src="'+ downUrl +'" style="height: 20px;">';
      } else {
        rate = rate;
      }
      $('#chartLeft01Score').html(score);
      $('#chartLeft01Rank').html(rank);
      $('#chartLeft01Rate').html(rate);
    }

    function renderTable01() {
      var str = '';
      var max = 5;
      var result = [
        { rank: 1, brand: '格力', score: 4.8, rankImprove: 0, },
        { rank: 2, brand: '奥克斯', score: 4.4, rankImprove: 0, },
        { rank: 3, brand: '海尔', score: 3.8, rankImprove: 0, },
        { rank: 4, brand: '九阳', score: 3.2, rankImprove: -1, },
        { rank: 5, brand: '苏泊尔', score: 3, rankImprove: 1, },
      ];
      result.forEach(function (item, index) {
        var rate = ((item.score / max) * 100).toFixed(2) + '%';
        str += '<tr>';
        str += '<td><span class="rank rank-'+ index +'">'+ item.rank +'</span></td>';
        str += '<td>'+ item.brand +'</td>';
        str += '<td><div class="bar-bg"><div class="bar" style="width: '+ rate +'"></div></div><div class="score">'+ item.score +'</div></td>';
        str += '<td>';
        var improveStr = '';
        if (item.rankImprove > 0) {
          improveStr = '<img src="'+ upUrl +'" style="height: 14px;">';
        } else if (item.rankImprove < 0) {
          improveStr = '<img src="'+ downUrl +'" style="height: 14px;">';
        }
        str += improveStr + item.rankImprove;
        str += '</td>';
        str += '</tr>';
      });
      $('#tableRight01 tbody').html(str);
    }

    function renderTable02() {
      var str = '';
      var max = 5;
      var result = [
        { rank: 1, brand: '冰箱', score: 4.8, rankImprove: 0, },
        { rank: 2, brand: '厨房电器', score: 4.4, rankImprove: 0, },
        { rank: 3, brand: '中央空调', score: 3.8, rankImprove: 0, },
        { rank: 4, brand: '家用空调', score: 3.2, rankImprove: -1, },
        { rank: 5, brand: '洗衣机', score: 3, rankImprove: 1, },
      ];
      result.forEach(function (item, index) {
        var rate = ((item.score / max) * 100).toFixed(2) + '%';
        str += '<tr>';
        str += '<td><span class="rank rank-'+ index +'">'+ item.rank +'</span></td>';
        str += '<td>'+ item.brand +'</td>';
        str += '<td><div class="bar-bg"><div class="bar" style="width: '+ rate +'"></div></div><div class="score">'+ item.score +'</div></td>';
        str += '<td>';
        var improveStr = '';
        if (item.rankImprove > 0) {
          improveStr = '<img src="'+ upUrl +'" style="height: 14px;">';
        } else if (item.rankImprove < 0) {
          improveStr = '<img src="'+ downUrl +'" style="height: 14px;">';
        }
        str += improveStr + item.rankImprove;
        str += '</td>';
        str += '</tr>';
      });
      $('#tableRight02 tbody').html(str);
    }
  }
}

var upUrl = '/static/images/u495.png';
var downUrl = '/static/images/u499.png';

</script>
<style lang="scss">
  @import './main.scss';
</style>
